<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-前缀的是vue指令</title>
    <script src="vue.min.js"></script>
    <style>
        .div1 div{
            min-height: 60px;
            background: aqua;
            margin: 6px;
        }
        .class1:after{
            content: "has class1";
        }
        .class2:after{
            content: "has class2";
        }
        .class3:after{
            content: "has class3";
        }
    </style>
</head>
<body>
<div class="div1">
    <div>{{h1}}</div><!--模板填充html-->
    <div v-html="h1" v-bind:title="title"></div><!--v-html填充html-->
    <div v-bind:title="getTitle()"></div>
    <div v-bind:title="obj1" v-html="obj1"></div><!--v-bind具有增强效果，如此处title将会调用obj1的toString方法，但是v-html得到仅仅一个简单的{}-->
    <div v-bind:title="arr">{{arr}}</div><!--v-bind增强效果，title是1,2,3，但是div的html是[1,2,3]，似乎是原样输出了-->
    <div v-bind:class="classobj"></div>
    <div v-bind:class="classarr"></div>
    <div :style="style1"></div><!--v-bind缩写-->
</div>
<script>
    var obj1 = {};
    obj1.toString = function () {
        return "改写obj1的toString方法";
    }
    var vm = new Vue({
        el:".div1",
        data:{
            h1:"<h1>模板语法</h1>",
            title:"this title",
            getTitle:function () {
                return "get tittle from func";
            },
            obj1:obj1,
            arr:[1,2,3],
            //v-bind样式增强，v-bind:class="对象"，对象各个属性名代表class，属性值为true时，则该元素具有属性名对应的class
            classobj:{
                class1:true,
                class2:false,
                class3:true
            },
            //v-bind数组class
            classarr:[
                "c1","c2","c3"
            ],
            //v-bind处理内联样式
            style1:"background: #009a61;"
            //总之，v-bind能够利用到各种各样的元素属性中
        }
    })
</script>
</body>
</html>